<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<script src="../../js/gsaucommon.js"></script>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			body {
				
				width: 100%;
			}

			html {
				width: 100%;
			}

			/* 大盒子 */
			#addJingSai {

				width: 90%;
				background-color: white;
				margin: 0 auto;
				margin-top: 20px;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
			}

			#header {
				top: 0px;
				background-color: white;
				position: sticky;
				z-index: 5;
				border-bottom: 2px solid #F8F8FF;
				margin-bottom:40px ;
			}

			#header #left {
				height: 80px;
				line-height: 80px;
				text-indent: 12px;

			}

			#header #right {
				height: 80px;

				line-height: 80px;
				/* font-size: 32px;
				font-weight: bold; */
				text-align: right;

			}

			#hr1 {

				/* width:98%;
				margin: 0 auto; */
				color: whitesmoke;
				margin-bottom: 30px;

			}
		</style>
	</head>
	<body>
		<div id="addJingSai"   v-loading="loading">

			<el-row id="header">
				<el-col :span="20">
					<div class="grid-content bg-purple" id="left">
						<h3>用户管理 \ 添加页面</h3>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple-light" id="right" style="margin-right: 30px;">
						<el-button  @click=to() > 返回</el-button>
					</div>
				</el-col>
			</el-row>
			
			<el-row style="padding-left: 40px;" >
				
				<el-form :model="form" :rules="rules" ref="form" label-width="80px" class="demo-ruleForm" name>


					<el-row>
						<el-col :span="8">
							<div class="grid-content bg-purple-dark">
								<el-form-item label="登记类型" prop="region">
									<el-button :plain="true" style="width: 220px;text-align: left;" @click="open1">
										{{form.region}}</el-button>
								</el-form-item>
							</div>
						</el-col>
						<el-col :span="8">
							<div class="grid-content bg-purple-dark">
								<el-form-item label="填报人" prop="tianbaoName" placeholder="竞赛名称">
									<el-button :plain="true" style="width: 120px;text-align: left;" @click="open1">
										{{form.tianbaoName}}</el-button>
								</el-form-item>
							</div>
						</el-col>
					</el-row>


					<el-row>
						<el-col :span="8">
							<div class="grid-content bg-purple" id="left">
								<el-form-item label="竞赛名称" style="width: 300px" placeholder="竞赛名称" prop="jingsaiName">
									<el-input v-model="form.jingsaiName"></el-input>
								</el-form-item>
							</div>
						</el-col>
						<el-col :span="8">
							<div class="grid-content bg-purple-light" id="right">
								<el-col :span="8">
									<el-form-item label="组织单位" style="width: 300px;" prop="zuzhiDanWei">
										<el-input v-model="form.zuzhiDanWei"></el-input>
									</el-form-item>
								</el-col>
							</div>
						</el-col>
					</el-row>



					<el-row>
						<el-col :span="8">
							<el-form-item label="奖项级别" style="width: 300px;" prop="huojiangJibie">
								<el-select v-model="form.huojiangJibie" placeholder="请选择奖项级别"
									value="form.huojiangjibie">
									<el-option v-for="(item,index) in huojiangjibie" :key="index" :label="item.name"
										:value="item.name"></el-option>
									<!-- 			<el-option label="" value="2"></el-option>
									<el-option label="教材与专著登记表" value="3"></el-option> -->

								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="得分" style="width: 200px" prop="deFen">
								<el-input v-model="form.deFen"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="8">
							<el-form-item label="获奖时间" style="width: 300px" prop="huojiangDate">
								<el-date-picker type="date" placeholder="选择日期" v-model="form.huojiangDate"
									value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="所获奖项" style="width: 200px" prop="suoHuoJiangXiang">
								<el-input v-model.number="form.suoHuoJiangXiang"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-form-item label="获奖等级" prop="huojiangDengji">
					<!-- 	<el-checkbox-group v-model="form.huojiangDengji">
							<el-inpu v-for="(item,index) in huojiangdengji" :key="index" :label="item.name"
								:value="item.name">
							</el-checkbox>
						</el-checkbox-group> -->
						  <el-radio-group v-model="form.huojiangDengji">
							  <el-radio v-model="form.radio"  v-for="(item,index) in huojiangdengji" :key="index" :label="item.name"
							  								:value="item.name"></el-radio>
						  </el-radio-group>
						  
						  
					</el-form-item>
					<el-form-item label="证明材料" style="width: 100%;">
						<el-upload
							class="upload-demo" 				
							drag
							:action="staticUrl" 						
							:on-change="onChange"
							:on-success="uploadSuccess"
							:on-error="uploadError" 	
                            :on-preview="handlePreview"
							:on-remove="handleRemove" 
							:before-remove="beforeRemove" 			
							multiple 
							:on-exceed="handleExceed" 
						    :file-list="fileList" >
						
							<i class="el-icon-upload"></i>
							<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
							<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
						</el-upload>
					</el-form-item>

					<el-form-item label="备注" prop="memo">
						<el-input type="textarea" v-model="form.memo"></el-input>
					</el-form-item>

					<!--  提交栏 -->
					<el-form-item>
						<!-- <el-button type="primary" @click="onsubmit(),open()">添加信息</el-button> -->
                        <el-button type="primary" @click="submitForm('form')" >添加信息</el-button>
						<el-button  @click="resetForm('form')">重置</el-button>
					</el-form-item>
				</el-form>
				<!-- </el-col> -->
			</el-row>

		</div>
		<script type="text/javascript">
			new Vue({
				el: '#addJingSai',
				data: {
					form: {	
						tianbaoName: '无',
						region: '指导竞赛登记表',
						tianbaoId: 7,
						zuzhiDanWei: '',
						huojiangJibie: '',
						huojiangDengji: '',
						jingsaiName: '',
						suoHuoJiangXiang: null,
						deFen:'',
						huojiangDate: '',
						updateby: '',
						memo: '',
						createBy: '',
						fileList:[],
						tianbaoId:'',
						updateTime:'',
					    loading: true,
					},
					staticUrl:'',
					fileList:[],
					fileMapprings:[],
					loading:false,
					huojiangjibie: [],
					huojiangdengji: [],
					rules: {
						
						tianbaoName: [{
								required: true,
								message: '请输入填报人',
								trigger: 'blur'
							},
							{
								min: 1,
								max: 20,
								message: '长度在 1 到 20 个字符',
								trigger: 'blur'
							}
						],
						region: [{
							required: false,
							message: '只读',
							trigger: 'click'
						}],
						huojiangJibie: [{
							required: false,
							message: '请选择登记表级别',
							trigger: 'change'
						}],
						jingsaiName: [{
							required: false,
						}],
						zuzhiDanWei: [{
							required: false
						}],
						deFen: [{
								required: false
							},
							{
								type: 'string',
								trigger: 'change'
							},
							

						],
						suoHuoJiangXiang: [{
								required: false,
							},
							{
								type: 'number',
								message: '所获奖项应该为数字值',
								trigger: 'change'
							},

						],
						people: [{
								required: false
							},
							{
								type: 'number',
								message: '人数必须为数字值',
								trigger: 'change'
							},
						],
						huojiangDate: [{
							type: 'string',
							required: false,
							message: '请选择日期',
							trigger: 'change'
						}],

						huojiangDengji: [{
							type: 'string',
							required: false,
							trigger: 'change'
						}],

					}

				},
				//生命周期函数
				created() {
					this.findDengji()
					this.findJibie()
					this.staticUrl=window.gsau+"upload/save"
					console.log(this.staticUrl)
					let user = sessionStorage.getItem("user")
					this.form.tianbaoName = user
					this.form.createBy = user
				},
				
				methods: {
					// 跳转方法
					to(){
						window.location="list.html";
					},
					// 绑定提交信息按钮
					onsubmit() {
						//用于获取提交时的时间:yyyy-MM-dd HH:mm:ss
						
						if(this.fileList!=''&&this.fileList.length!=0){
							this.newFileList()
							}
						
						
						console.log(this.form)
					    this.form.tianbaoId=7			
						axios.post(window.gsau+"zhidaojingsai/add", this.form).then((res) => {
							if(res.data.code==10010){
								this.$message.success("添加成功")
								this.resetForm(this.form)
							}else
							    this.$message.error("添加异常,请重试")
								
						}).finally(() => {

						})

					},
		
					resetForm(formName) {
					        this.$refs[formName].resetFields();
							this.fileList=[]
					      },

					//只读消息提示
					open1() {
						this.$message('只读');
					},

					//检验是否提交函数,可在添加信息中取消该函数
					open() {
						
						this.$confirm('是否提交,提交后不允许修改?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.onsubmit()
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消提交'
							});
						});
					},
					
					//文件响应内容转换
					newFileList(){
					 this.form.fileList=[]
					 for(let i=0;i<this.fileList.length;i++){
						 this.form.fileList.push(this.fileList[i].response.data)
						 
					 }
					},
					//检验函数 若不符合则无法提交
					submitForm(formName) {
						this.$refs[formName].validate((valid) => {
							if (valid) {
							this.open()
							} else {
							this.$message('不符合规则,请重新填写');
								return false;
							}
						})
					},


					findDengji() {
						axios.get(window.gsau+"huojiangdengji/findall").then((response) => {
							console.log(response.data.code)
                            if(response.data.code==40010)
							this.huojiangdengji = response.data.data
							else
							this.$message.error("系统异常")
						}).finally(() => {
							
						})
					},
					findJibie() {
						axios.get(window.gsau+"huojiangjibie/findall").then((response) => {

                            if(response.data.code==40010)
							this.huojiangjibie = response.data.data
							else
							this.$message.error("系统异常")
							
						}).finally(() => {
							console.log("成功")
						})

					},
					
					//文件上传的钩子函数
					uploadSuccess(response, file, fileList){
						console.log("完成")
						console.log(fileList)
					if (response.code == 200) {
						// this.form.FileList.push(response.data.newfilename)
						// this.lastuploadfile = response.data.newfilename
						// let m = {
						// 	oldfilename:'',
						// 	newfilename:''
						// }
						
						// m.newfilename = response.data.newfilename
						// m.oldfilename = response.data.oldfilename
						// this.fileMapprings.push(m)
						
						this.$message.success(file.name + "文件上传成功")

					}else{
						this.$message.error(response.data + "：上传失败，请重新上传");
						// //删除上传列表中，失败的文件
						// let index = 0;
						// for (const i in fileList) {
						// 	if (fileList[i] == file) {
						// 		index = i;
						// 		break;
						// 	}
						// }
						// //移出当前文件对象
						// fileList.splice(index, 1);
						this.$refs.uploadFile.clearFiles();
					}},
					uploadError(err, file, fileList){
						console.log("文件上传失败")
						this.$message.error(file.name + "上传失败，请重新上传");
						//删除上传列表中，失败的文件
						// let index = 0;
						// for (const i in fileList) {
						// 	if (fileList[i] == file) {
						// 		index = i;
						// 		break;
						// 	}
						// }
						// //移出当前文件对象
						// fileList.splice(index, 1);
						// this.$refs.uploadFile.clearFiles();
						
					},
					onChange(file, fileList){
						console.log(fileList)
						this.fileList=fileList
						console.log(this.fileList)
					},
					handlePreview(file){
						
					},
					handleRemove(file, fileList){
						
					},
					beforeRemove(file, fileList){
						
						this.fileList=fileList
						
					},
					handleExceed(file, fileList){
						
					}
					
					


					


				},
			})
		</script>

	</body>


</html>
